<template>
  <view class="feedback-container">
    <view class="header">
      <text class="title">
        <text class="bi bi-chat-dots"></text> 意见反馈
      </text>
    </view>

    <!-- 反馈表单 -->
    <view class="feedback-form">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" @submit="onSubmit">
        <!-- 反馈类型 -->
        <uni-forms-item label="反馈类型" name="type">
          <uni-data-checkbox
            v-model="formData.type"
            :localdata="feedbackTypes"
            mode="tag"
          />
        </uni-forms-item>

        <!-- 反馈内容 -->
        <uni-forms-item label="反馈内容" name="content">
          <uni-easyinput
            v-model="formData.content"
            type="textarea"
            placeholder="请详细描述您遇到的问题或建议..."
            :maxlength="500"
            :autoHeight="true"
          />
        </uni-forms-item>

        <!-- 图片上传 -->
        <uni-forms-item label="上传图片" name="images">
          <uni-file-picker
            v-model="formData.images"
            fileMediatype="image"
            mode="grid"
            :limit="4"
            @select="onImageSelect"
            @delete="onImageDelete"
          />
          <text class="tips">支持jpg/png格式，单张不超过5MB，最多4张</text>
        </uni-forms-item>

        <!-- 联系方式 -->
        <uni-forms-item label="联系方式" name="contact">
          <uni-easyinput
            v-model="formData.contact"
            placeholder="请留下您的手机号或邮箱，方便我们回复您"
          />
        </uni-forms-item>

        <!-- 提交按钮 -->
        <view class="submit-section">
          <button 
            class="submit-btn" 
            :loading="submitting"
            @tap="submitForm"
          >
            提交反馈
          </button>
        </view>
      </uni-forms>
    </view>

    <!-- 反馈历史 -->
    <view class="feedback-history">
      <view class="section-title">
        <text class="bi bi-clock"></text>
        <text>反馈历史</text>
      </view>
      
      <view v-if="feedbackHistory.length" class="history-list">
        <view 
          v-for="item in feedbackHistory" 
          :key="item.id"
          class="history-item"
        >
          <view class="item-header">
            <uni-tag :text="getTypeName(item.type)" :type="getTagType(item.type)" />
            <text class="time">{{ item.time }}</text>
          </view>
          <view class="content">{{ item.content }}</view>
          
          <!-- 图片预览 -->
          <view v-if="item.images?.length" class="image-preview">
            <image
              v-for="(image, index) in item.images"
              :key="index"
              :src="url(image,'','png')"
              mode="aspectFill"
              @tap="previewImage(item.images, index)"
            />
          </view>
          
          <!-- 回复内容 -->
          <view v-if="item.reply" class="reply">
            <text class="reply-title">官方回复：</text>
            <text class="reply-content">{{ item.reply }}</text>
          </view>
        </view>
      </view>
      
      <view v-else class="empty-state">
        <text class="bi bi-inbox"></text>
        <text>暂无反馈记录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const url = $url;
const formData = ref({
  type: '',
  content: '',
  images: [],
  contact: ''
});

const feedbackTypes = [
  { value: 'bug', text: '功能异常' },
  { value: 'suggestion', text: '功能建议' },
  { value: 'content', text: '内容相关' },
  { value: 'other', text: '其他' }
];

const rules = {
  type: [{ required: true, message: '请选择反馈类型' }],
  content: [
    { required: true, message: '请输入反馈内容' },
    { minLength: 10, message: '反馈内容至少10个字' }
  ],
  contact: [
    { pattern: /^1[3-9]\d{9}$|^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, 
      message: '请输入正确的手机号或邮箱' }
  ]
};

const submitting = ref(false);

// 示例反馈历史数据
const feedbackHistory = ref([
  {
    id: 1,
    type: 'bug',
    content: '商品详情页图片无法加载',
    images: ['sgift'],
    time: '2024-01-15 14:30',
    reply: '感谢反馈，我们已修复该问题，请刷新页面重试。'
  },
  {
    id: 2,
    type: 'suggestion',
    content: '建议添加更多商品展示图片',
    time: '2024-01-14 16:20'
  }
]);

// 提交表单
const submitForm = async () => {
  submitting.value = true;
  try {
    await uni.showLoading({ title: '提交中...' });
    // 模拟提交
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    });
    
    formData.value = {
      type: '',
      content: '',
      images: [],
      contact: ''
    };
  } catch (error) {
    uni.showToast({
      title: '提交失败',
      icon: 'error'
    });
  } finally {
    uni.hideLoading();
    submitting.value = false;
  }
};

// 图片相关处理
const onImageSelect = (e) => {
  console.log('选择图片:', e);
};

const onImageDelete = (e) => {
  console.log('删除图片:', e);
};

const previewImage = (images, current) => {
  const urls = images.map(img => url(img, '', 'png'));
  uni.previewImage({
    urls,
    current
  });
};

// 辅助函数
const getTypeName = (type) => {
  const types = {
    bug: '功能异常',
    suggestion: '功能建议',
    content: '内容相关',
    other: '其他'
  };
  return types[type] || '未知类型';
};

const getTagType = (type) => {
  const types = {
    bug: 'error',
    suggestion: 'warning',
    content: 'success',
    other: 'primary'
  };
  return types[type] || 'default';
};
</script>

<style lang="scss" scoped>
.feedback-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 20rpx;
}

.header {
  margin-bottom: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    
    .bi {
      margin-right: 10rpx;
      color: var(--td-brand-color);
    }
  }
}

.feedback-form {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.tips {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.submit-section {
  margin-top: 40rpx;
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: var(--td-brand-color);
    color: #fff;
    border-radius: 40rpx;
    font-size: 32rpx;
    border: none;
    
    &:active {
      opacity: 0.8;
    }
  }
}

.feedback-history {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    
    .bi {
      margin-right: 10rpx;
      color: var(--td-brand-color);
    }
  }
}

.history-item {
  padding: 20rpx;
  border-bottom: 2rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
  }
  
  .time {
    font-size: 24rpx;
    color: #999;
  }
  
  .content {
    font-size: 28rpx;
    line-height: 1.6;
    margin: 10rpx 0;
  }
}

.image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin: 10rpx 0;
  
  image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
  }
}

.reply {
  background: #f8f8f8;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-top: 10rpx;
  
  .reply-title {
    font-size: 26rpx;
    font-weight: bold;
    color: var(--td-brand-color);
  }
  
  .reply-content {
    font-size: 26rpx;
    color: #666;
    margin-top: 10rpx;
  }
}

.empty-state {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  
  .bi {
    font-size: 80rpx;
    margin-bottom: 20rpx;
    display: block;
  }
}
</style> 